<template>
	<view class="page">
		<view class="sc-card" style=" border-radius: 0; margin: 0;">
			<view class="img-box" style="height:45vw; background-image:url(https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png); background-size: cover; border-radius: 0;"></view>
		</view>
		<!-- pic end -->
		<view class="u-f-ac padding15 bg-white ">
			<view class="u-f1 u-f-ajc u-f-column">
				<view class="f-green f22 ">4</view>参与人数
			</view>
			<view class="u-f1 u-f-ajc u-f-column">
				<view class="f-green f22 ">6</view>投票数
			</view>
			<view class="u-f1 u-f-ajc u-f-column">
				<view class="f-green f22 ">77</view>浏览数
			</view>
		</view>
		<view class="margin10 padding5 bg-white u-f-ac">
			<view class="u-f2 tac">距离投票结束还有<br>
				<text class="f-green f16">9</text>天 <text class="f-green f16">10</text>时<text class="f-green f16">52</text>分 <text
				 class="f-green f16">14</text>秒
			</view>
			<view class="u-f1 tac f-green" style="border-left: 1px solid #eee;">
				<view class="iconfont icon-jibenxinxi "></view>
				投票介绍
			</view>
		</view>
		<view class="margin10  bg-white weui-search-bar" style="position: relative; ">
			<input type="search" class="search-input pbt5" id='search' placeholder='请输入编号或者活动名称....' /><button class="weui-btn weui-btn_mini sc-btn2"><span
				 class="weui-icon-search f-green f28"></span></button>
			<!-- 搜索end -->
		</view>

		<view class="uni-product-list sc-tplist">
			<view class="uni-product ">
				<view class="image-view">
					<span class="sc-mark-lt">1</span>
					<image class="uni-product-image" src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png"></image>
				</view>
				<view class="bg-white padding10-b">
					<view class="uni-product-title margin10-r margin10-l  f16 padding10-t">银杏道</view>
					<view class="uni-product-price margin10-r margin10-l">
						<text class="uni-product-price-original f-green">第1名 / 3票</text>
						<button class="weui-btn weui-btn_primary f16">投TA一票</button>
					</view>
				</view>

			</view>
			<!-- end -->
			<view class="uni-product ">
				<view class="image-view">
					<span class="sc-mark-lt">2</span>
					<image class="uni-product-image" src="https://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view5.jpg"></image>
				</view>
				<view class="bg-white padding10-b">
					<view class="uni-product-title margin10-r margin10-l f16 padding10-t">钟楼</view>
					<view class="uni-product-price margin10-r margin10-l">
						<text class="uni-product-price-original f-green">第2名 / 3票</text>
						<button class="weui-btn weui-btn_primary f16">投TA一票</button>
					</view>
				</view>
			</view>
			<!-- end -->
			<view class="uni-product ">
				<view class="image-view">
					<span class="sc-mark-lt">3</span>
					<image class="uni-product-image" src="https://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view7.jpg"></image>
				</view>
				<view class="bg-white padding10-b">
					<view class="uni-product-title margin10-r margin10-l f16 padding10-t">蔷薇墙</view>
					<view class="uni-product-price margin10-r margin10-l">
						<text class="uni-product-price-original f-green">第3名 / 3票</text>
						<button class="weui-btn weui-btn_primary f16">投TA一票</button>
					</view>
				</view>
			</view>
			<!-- end -->
			<view class="uni-product ">
				<view class="image-view">
					<span class="sc-mark-lt">4</span>
					<image class="uni-product-image" src="https://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view14.jpg"></image>
				</view>
				<view class="bg-white padding10-b">
					<view class="uni-product-title margin10-r margin10-l f16 padding10-t">校园一角</view>
					<view class="uni-product-price margin10-r margin10-l">
						<text class="uni-product-price-original f-green">第4名 / 3票</text>
						<button class="weui-btn weui-btn_primary f16">投TA一票</button>
					</view>
				</view>
			</view>
			<!-- end -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.page {
		background: #f7f7f7;
	}

	.tac {
		text-align: center;
	}

	.pbt5 {
		padding: 16upx;
	}

	.sc-btn2:after {
		border: 1px solid #fff !important;
		border-left: 1px solid #ddd !important;
		;
	}

	.sc-btn2 {
		position: absolute;
		right: 16upx;
		top: 20upx;
	}

	.sc-tplist .weui-btn,
	.sc-tplist .uni-product-title {
		width: auto;
	}

	.sc-tplist .image-view {
		margin: 0;
		position: relative;
	}

	.sc-mark-lt {
		position: absolute;
		left: 0;
		bottom: 0;
		border-radius: 0 1.5rem 1.5rem 0;
		font-size: 1rem;
		line-height: 1.25em;
		text-align: center;
		padding: 0.2rem 1.2rem;
		color: #fff;
		z-index: 888;
		background: #ffa200;
		text-align: center;
	}
</style>
